<template>
	<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
		<div class="phoneForm">
			<el-form-item prop="area_code" style="flex: 2; margin-right: 5px; margin-bottom: 20px">
				<el-select v-model="loginForm.area_code" class="m-2" placeholder="区号" size="large">
					<el-option
						v-for="item in codeList"
						:key="item.area_code"
						:label="'+' + item.area_code + ' ' + item.area_name"
						:value="item.area_code"
					/>
				</el-select>
			</el-form-item>
			<el-form-item prop="username" style="flex: 5; margin-bottom: 20px">
				<el-input :validate-event="false" v-model="loginForm.mobile" placeholder="手机号码">
					<template #prefix>
						<el-icon class="el-input__icon"><Iphone /></el-icon>
					</template>
				</el-input>
			</el-form-item>
		</div>
		<el-form-item prop="username" style="flex: 5; margin-bottom: 20px">
			<el-input :validate-event="false" v-model="loginForm.username" placeholder="账号昵称">
				<template #prefix>
					<el-icon class="el-input__icon"><User /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item style="margin-bottom: 20px" prop="code">
			<el-input style="margin-right: 10px; flex: 2" :validate-event="false" v-model="loginForm.code" placeholder="验证码">
			</el-input>
			<el-button :disabled="timer" @click="verifyCode()" type="primary"
				>{{ timer ? countDown + "秒后重试" : "发送验证码" }}
			</el-button>
		</el-form-item>
		<el-form-item style="margin-bottom: 20px" prop="password">
			<el-input
				:validate-event="false"
				type="password"
				v-model="loginForm.password"
				placeholder="密码"
				show-password
				autocomplete="new-password"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><lock /></el-icon>
				</template>
			</el-input>
		</el-form-item>

		<el-form-item style="margin-bottom: 30px" prop="password">
			<el-input
				:validate-event="false"
				type="password"
				v-model="loginForm.password_confirm"
				placeholder="确认密码"
				show-password
				autocomplete="new-password"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><lock /></el-icon>
				</template>
			</el-input>
			<div class="logon">
				注册即表示您已阅读、理解并同意
				<span @click="show = true" style="cursor: pointer; color: var(--el-color-primary)">《速邮达用户服务协议》</span>
			</div>
		</el-form-item>
	</el-form>

	<div class="login-btn">
		<!-- <el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button> -->
		<el-button :icon="UserFilled" round @click="registerCount(loginFormRef)" size="large" type="primary" :loading="loading">
			立即注册
		</el-button>
	</div>
	<div class="logon" style="text-align: center">
		已有账号
		<span @click="toLogin()" style="cursor: pointer; color: var(--el-color-primary)"
			>立即登录<span style="position: relative; top: -2px">👉</span></span
		>
	</div>
	<PrivacyPolicy v-model:show="show"></PrivacyPolicy>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { listMobileAreaCode, sendVerifyCode, register } from "@/api/base";
import { UserFilled } from "@element-plus/icons-vue";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";
import PrivacyPolicy from "@/components/PrivacyPolicy/index.vue";
const emit = defineEmits(["changetitle"]);

const show = ref(false);
// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
	// username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	// password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

const loading = ref(false);
const loginForm = reactive({ mobile: "", password: "", area_code: 86, code: "", password_confirm: "", username: "" });
const registerCount = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async valid => {
		if (!valid) return;
		loading.value = true;
		try {
			// 1.执行注册接口
			register({ ...loginForm }).then(res => {
				ElMessage.success(res.msg);
				emit("changetitle", "login");
			});
		} finally {
			loading.value = false;
		}
	});
};

//区号列表
const codeList: any = ref([]);
async function getcodeList() {
	let res: any = await listMobileAreaCode();
	return res.data.list;
}
onMounted(() => {
	getcodeList().then(res => {
		codeList.value = res;
	});
	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
			if (loading.value) return;
			registerCount(loginFormRef.value);
		}
	};
});

const timer = ref<Number | null>(null);
const countDown = ref(120);
const verifyCode = () => {
	if (timer.value !== null) return;
	sendVerifyCode({ area_code: loginForm.area_code, mobile: loginForm.mobile, flag: 1 }).then(res => {
		ElMessage.success("发送短信成功,请注意查收!");
		countDown.value = 119;
		timer.value = window.setInterval(() => {
			countDown.value--;
			if (countDown.value <= 0) {
				if (timer.value) window.clearInterval(timer.value as number);
				countDown.value = 120;
				timer.value = null;
			}
		}, 1000);
	});
};
const toLogin = () => {
	emit("changetitle", "login");
};
</script>

<style scoped lang="scss">
@import "../index.scss";
.phoneForm {
	display: flex;
}
</style>
